<template>
	<view>
		<!-- 订单卡片 -->
		<view class="order_card">
			<view class="pic"><image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1522896279,3368943916&fm=26&gp=0.jpg" mode=""></image></view>
			<view class="infor">
				<view class="serve_name">洗剪吹服务</view>
				<view class="serve_cont">发型提案+修剪+造型</view>
				<view class="serve_price">
					<text class="logs">￥</text>
					<text>365</text>
				</view>
			</view>
			<view class="numbers">
				<view class="anniu">
					<text @click="sub">-</text>
					<text style="width: 60rpx;">{{ number }}</text>
					<text @click="add">+</text>
				</view>
			</view>
		</view>
		<!-- 预约时间 -->
		<view class="timeel">
			<view class="top" @click="openPop">
				<view>
					<text class="text1">预约时间：</text>
					<text class="text2">{{please}}</text>
				</view>
				<view><text class="icon iconfont">&#xe6f2;</text></view>
			</view>
			<view class="bott">选择预约时间，立即优惠20%，不可取消（1小时内可以免责取消1次）</view>
		</view>
		<!-- 优惠卡 -->
		<view class="hui_card">
			<view>
				<text class="hui_text1">优惠</text>
				<text class="hui_text2">满立减优惠券</text>
				<text class="hui_text3">1张可用</text>
			</view>
			<view class="hui_r">
				<text class="hui_text4">-￥{{ youhui }}</text>
				<view style="transform: translateY(6rpx);">
					<u-checkbox-group @change="change1"><u-checkbox v-model="flage" active-color="#00C6C2" size="40" icon-size="35" name="30"></u-checkbox></u-checkbox-group>
				</view>
			</view>
		</view>
		<!-- 会员 -->
		<view class="vip_card">
			<view class="card_top">
				<view>
					<text class="vip_text1">会员</text>
					<text class="vip_text2">首单预约金减免</text>
					<text class="vip_text3">美vip</text>
				</view>
				<view style="display: flex;">
					<text class="vip_text4">-￥{{ v_number }}</text>
					<view style="transform: translateY(	6rpx);">
						<u-checkbox-group><u-checkbox v-model="flage1" active-color="#00C6C2" size="40" icon-size="35"></u-checkbox></u-checkbox-group>
					</view>
				</view>
			</view>
			<view class="card_bot">
				<view class="bot_text">开通美VIP平台会员，享受平台签约会员权开卡仅需{{ card_number }}元</view>
				<view class="bot_r"><switch :checked="flage2" @change="change2" color="#00C6C2" style="transform: scale(0.7);" /></view>
			</view>
		</view>

		<!-- 价格 -->
		<view class="price_list">
			<view class="price_infors">
				<view class="price_name">商品金额</view>
				<view class="price_number">¥365</view>
			</view>
			<view class="price_infors">
				<view class="price_name">预约优惠</view>
				<view class="price_number">-¥30</view>
			</view>
			<view class="price_infors">
				<view class="price_name">满减优惠</view>
				<view class="price_number">-¥50</view>
			</view>
			<view class="price_infors">
				<view class="price_name">开通美VIP会员</view>
				<view class="price_number">+¥365</view>
			</view>
			<view class="price_infors">
				<view class="price_name">美VIP会员优惠</view>
				<view class="price_number">-¥30</view>
			</view>
			<view class="price_count">
				<view class="count_name">应付金额</view>
				<view class="count_number">¥620</view>
			</view>
		</view>
		<!-- 留言 -->
		<view class="liuyan"><input type="text" value="" v-model="cont" /></view>
		<view class="text">温性提示：您付款的钱将于wawstyle平台托管，确认消费满意才会被支付给设计师。</view>
		<!-- //去支付 -->
		<view class="play">
			<view class="counts">应付合计：￥{{ totals }}</view>
			<view class="zhifu"><text>去支付</text></view>
		</view>
		<!-- //选择日期的弹窗 -->
		<view>
			<uni-popup type="bottom" ref="pop">
				<view class="pop">
					<!-- 选择服务时间 -->
					<view class="serve_time">
						<view class="text_time">选择服务时间</view>
						<view class="text1_close" @click="closePop()"><text class="icon iconfont">&#xe688;</text></view>
					</view>
					<!-- 时间段 -->
					<view class="chunck_time">
						<view v-for="(item, index) in list" :key="index" :class="{ con: active == index, defaults: true }" @click="chooseTiem(index,item)">
							<view class="day">{{ item.day }}</view>
							<view class="data">{{ item.years_more }}</view>
						</view>
					</view>
					<!-- 预约列表 -->
					<view class="Subscribe">
						<view v-for="(item,index) in list_time" :key='index' :class="{smallbox:true,act_box:item.status==='可预约'}" @click="chooseStatus(item)">
							<view class="Subscribe_time">{{item.time}}</view>
							<view class="Subscribe_status">{{item.status}}</view>
						</view>
					</view>
					<!-- //提示 -->
					<view class="wenxin_title">
						<view  style="font-size: 24rpx;font-family: PingFang;font-weight: 500;color: #707070;line-height: 30rpx;">
							温馨提示
						</view>
						<view style="font-size: 20rpx;font-family: PingFang SC;font-weight: 400;color: #707070;margin-top: 15rpx;">
							预约时间保留30分钟，请尽量准时到店避免等位。
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flage: true,
			flage1: true,
			flage2: true,
			cont: '给他留言吧',
			totalPrice: 0, //总价
			number: 1, //数量
			price: 365, //单价
			youhui: 30, //优惠价
			v_number: 30,
			card_number: 365,
			mon:'',//月份
			ts:'',//时间
			list: [], //7天时间
			active: 0,
			list_time: [
				{ time: '09:00', status: '已预约' },
				{ time: '10:00', status: '已预约' },
				{ time: '11:00', status: '已预约' },
				{ time: '12:00', status: '可预约' },
				{ time: '13:00', status: '已预约' },
				{ time: '14:00', status: '可预约' },
				{ time: '15:00', status: '已预约' },
				{ time: '16:00', status: '已预约' },
				{ time: '17:00', status: '已预约' },
				{ time: '18:00', status: '已预约' },
				{time:'19:00',status:'可预约'},
				{time:'20:00',status:'已预约'},
				{time:'21:00',status:'已预约'},
				{time:'22:00',status:'已预约'},
			],
			please:'请选择预约时间'
		};
	},
	methods: {
		// 打开弹出层
		openPop() {
			this.$refs.pop.open();
		},
		// 数量的加
		add() {
			this.number++;
		},
		// 数量的减法
		sub() {
			this.number--;
			if (this.number <= 1) {
				this.number = 1;
			}
		},
		change1(e) {
			console.log(e);
		},
		change2(e) {
			console.log(e);
			this.flage2 = e.detail.value;
		},
		//时间处理
		getTime() {
			for (var i = 0; i < 7; i++) {
				var weekDayArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; //星期映射数组
				var myDate = new Date();
				var milliseconds = myDate.getTime() + 1000 * 60 * 60 * 24 * i; //当i为0代表当前日期，为1时可以得到明天的日期，以此类推
				var newMyDate = new Date(milliseconds);
				var weekDay = newMyDate.getDay(); //获取当前星期X(0-6,0代表星期天)
				var year = newMyDate.getFullYear(); //获取当前年
				var month = newMyDate.getMonth() + 1; //获取当前月
				var day = newMyDate.getDate(); //获取当前日
				// console.log(year+'/'+month+'/'+day+weekDayArr[weekDay])
				var obj = {
					years: month + '-' + day,
					years_more: month + '月' + day + '日',
					day: weekDayArr[weekDay],
					all: year + '-' + month + '-' + day
				};
				this.list.push(obj);
			}
			this.list[0].day = '今天';
			this.list[1].day = '明天';
			this.list[2].day = '后天';
			this.ts = this.list[0].years_more
			// this.time = this.list[0].years.replace(/\//g,'-')
			// this.year = this.list[0].all
		},
		//选择时间
		chooseTiem(index,item) {
			this.active = index;
			this.ts = item.years_more
		},
		//关闭pop
		closePop() {
			this.$refs.pop.close();
		},
		//选择时间块
		chooseStatus(item){
			let that = this
			if(item.status ==='已预约'){
				return
			}else{
				uni.showModal({
					title:'时间选择',
					content:'是否选择'+item.time,
					success(res) {
						 if (res.confirm) {
						           item.status = '已预约'
								   that.please = that.ts + item.time
								   that.$refs.pop.close()
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
					}
				})
			}
		}
	},
	computed: {
		totals() {
			let result = 0;
			let hui_number = 0;
			let vip_number = 0;
			let card_number = 0;
			if (this.flage == true) {
				hui_number = this.youhui;
			}
			if (this.flage1 == true) {
				vip_number = this.v_number;
			}
			if (this.flage2 == true) {
				card_number = this.card_number;
			}
			result += this.price * this.number - hui_number - vip_number + card_number;
			return result;
		}
	},
	created() {
		this.getTime();
		console.log(this.list);
	}
};
</script>
<style>
page {
	background: #f7f7f7;
}
</style>
<style lang="less" scoped>
//订单卡片
.order_card {
	padding: 25rpx 28rpx;
	display: flex;
	background: #ffffff;
	box-shadow: 0px 0px 7rpx 0px rgba(90, 90, 90, 0.15);
	border-radius: 10rpx;
	.pic {
		width: 120rpx;
		height: 120rpx;
		margin-right: 22rpx;
		image {
			width: 120rpx;
			height: 120rpx;
		}
	}
	.infor {
		.serve_name {
			height: 40rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #212121;
			line-height: 36rpx;
		}
		.serve_cont {
			// height: 25rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #212121;
			line-height: 36rpx;
		}
		.serve_price {
			// height: 23rpx;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #282828;
			.logs {
				height: 23rpx;
				font-size: 20rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}
		}
	}
	.numbers {
		flex: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		.anniu {
			display: flex;
			text {
				// display: inline-block;
				background: #eeeeee;
				width: 50rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				margin-left: 15rpx;
			}
		}
	}
}

//预约时间
.timeel {
	padding: 35rpx 27rpx;
	margin-top: 15rpx;
	background: white;
	background: #ffffff;
	box-shadow: 0px 0px 7rpx 0px rgba(90, 90, 90, 0.15);
	border-radius: 10rpx;
	.top {
		border-bottom: 1rpx solid #e0e0e0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 65rpx;
		.text1 {
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #212121;
		}
		.text2 {
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #cbcbcb;
		}
	}
	.bott {
		margin-top: 10rpx;
		font-size: 20rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #707070;
		line-height: 36rpx;
	}
}
//优惠卡
.hui_card {
	margin-top: 15rpx;
	padding: 39rpx 27rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: #ffffff;
	box-shadow: 0px 0px 7rpx 0px rgba(90, 90, 90, 0.15);
	border-radius: 10rpx;
	.hui_text1 {
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #000000;
		margin-right: 23rpx;
	}
	.hui_text2 {
		margin-right: 23rpx;
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 400;
		color: #333333;
	}
	.hui_text3 {
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #00c6c2;
	}
	.hui_text4 {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
		text-align: center;
		line-height: 58rpx;
		margin-right: 20rpx;
	}
	.hui_r {
		display: flex;
	}
}

//会员
.vip_card {
	margin-top: 15rpx;
	background: #ffffff;
	box-shadow: 0px 0rpx 7rpx 0rpx rgba(90, 90, 90, 0.15);
	border-radius: 10rpx;
	padding: 27rpx 27rpx;
	line-height: 60rpx;
	.card_top {
		border-bottom: 1rpx solid #e0e0e0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.vip_text1 {
			margin-right: 20rpx;
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
		}
		.vip_text2 {
			margin-right: 20rpx;
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
		}
		.vip_text3 {
			display: inline-block;
			width: 62rpx;
			height: 24rpx;
			text-align: center;
			line-height: 24rpx;
			background: #000000;
			border-radius: 4rpx;
			font-size: 16rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #f0d9a9;
		}
		.vip_text4 {
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			text-align: center;
			line-height: 58rpx;
			margin-right: 20rpx;
		}
	}
	.card_bot {
		display: flex;
		margin-top: 15rpx;
		.bot_text {
			width: 442rpx;
			// height: 24rpx;
			margin-left: 74rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #707070;
			line-height: 30rpx;
		}
		.bot_r {
			flex: auto;
			display: flex;
			justify-content: flex-end;
		}
	}
}
//价格
.price_list {
	margin-top: 15rpx;
	padding: 34rpx 28rpx;
	background: #ffffff;
	box-shadow: 0px 0rpx 7rpx 0px rgba(90, 90, 90, 0.15);
	border-radius: 10rpx;
	.price_infors {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 10rpx;
		.price_name {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #707070;
			line-height: 30rpx;
		}
		.price_number {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #707070;
		}
	}
	.price_count {
		border-top: 1rpx solid #e0e0e0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 24rpx;
		.count_name {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #212121;
		}
		.count_number {
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #212121;
		}
	}
}
//留言
.liuyan {
	// height: 87rpx;
	background: white;
	margin-top: 15rpx;
	box-shadow: 0px 0px 7rpx 0px rgba(90, 90, 90, 0.15);
	border-radius: 10rpx;
	z-index: -1;
	input {
		// height: 100%;
		padding: 32rpx 26rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #bcbcbc;
	}
}

//底部文本
.text {
	font-size: 18rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #707070;
	padding: 25rpx 21rpx;
	margin-bottom: 76rpx;
}
//去支付
.play {
	display: flex;
	background: white;
	height: 98rpx;
	.counts {
		flex: 2;
		text-align: center;
		line-height: 98rpx;
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #212121;
	}
	.zhifu {
		flex: auto;
		text-align: center;
		line-height: 98rpx;
		background-color: #00c6c2;
		text {
			opacity: 0.8;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #ffffff;
		}
	}
}

//选择服务时间
.serve_time {
	display: flex;
	padding-top: 35rpx;
	.text_time {
		flex: 13;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
	}
	.text1_close {
		flex: auto;
		display: flex;
		justify-content: flex-end;
		margin-right: 25rpx;
		.iconfont {
			font-size: 33rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #00c6c2;
		}
	}
}
//时间段
.chunck_time {
	// height: 90rpx;
	padding: 14rpx 25rpx;
	background: #eeeeee;
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin-top: 29rpx;
	.defaults {
		font-weight: 500;
		color: #777777;
	}
	.day {
		font-size: 26rpx;
		font-family: PingFang;
	}
	.data {
		font-size: 18rpx;
		font-family: PingFang;
		font-weight: 500;
	}
	.con {
		font-weight: bold !important;
		color: #000000 !important;
		border-bottom: 4rpx solid #1ebbbd;
	}
}

//预约列表
.Subscribe{
	padding: 49rpx 28rpx;
	display: flex;
	flex-wrap: wrap;

	
	.smallbox{
		width: 140rpx;
		height: 100rpx;
		background: #F1F1F1;
		border-radius: 4rpx;		
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #777777;
		line-height: 36rpx;
		margin-bottom: 25rpx;
		margin-left: 30rpx;
		text-align: center;
		padding-top: 15rpx;
	}
	.act_box{
		width: 140rpx;
		height: 100rpx;
		border: 1rpx solid #1EBBBD;
		border-radius: 4rpx;		
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #00C6C2;
		line-height: 36rpx;
		background: white;
	}
}
.pop{
	height: 976rpx;width: 100%;background-color: white;
	position: relative;
}
//温馨提示
.wenxin_title{
	position: absolute;
	bottom: 20rpx;
	padding: 25rpx;
}
</style>
